<!DOCTYPE html>
<html lang="zh">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
  <title>Document</title>
  <link rel="stylesheet" href="../lib/element-treetable/theme-chalk/index.css">
  
</head>
<body>
  <div id="test">
    <el-table 
      :data="data" 
      border 
      @selection-change="handleSelectionChange"
      max-height="250">
      <el-table-column prop="id" label="id" type="selection" fixed :selectable="selectionFn"></el-table-column>
      <el-table-tree-column
        file-icon="icon icon-file" 
        folder-icon="icon icon-folder" 
        prop="label" label="labelname" width="220"></el-table-tree-column>
      <el-table-column prop="description" label="description" width="180"></el-table-column>
    </el-table>
    <hr>
  </div>
  <script src="../lib/js/vue.js"></script>
  <script src="../lib/vue-table-with-tree-grid.js"></script>
  <script src="../lib/element-treetable/index.js"></script>
  <script src="../lib/element-treetable/tree-table.js"></script>
  <script>
    new Vue({
    el: "#test",
    data: function() {
      return {
        data: [{
            "id": 1,
            "label": "System",
            "parent_id": null,
            "depth": 0,
            "child_num": 3,
            "description": "System Manager",
            "children": [{
                "id": 2,
                "label": "base",
                "parent_id": 1,
                "depth": 1,
                "child_num": 5,
                "description": "Base Manager",
                "children": [{
                    "id": 3,
                    "label": "Menus",
                    "parent_id": 2,
                    "depth": 2,
                    "child_num": 0,
                    "description": "menu manager",
                }, {
                    "id": 4,
                    "label": "Roles",
                    "parent_id": 2,
                    "depth": 2,
                    "child_num": 0,
                    "description": "Role Manager",
                }, {
                    "id": 5,
                    "label": "Users",
                    "parent_id": 2,
                    "depth": 2,
                    "child_num": 0,
                    "description": "User Manager",
                }]
            }]
        }, {
            "id": 6,
            "label": "Customs",
            "parent_id": null,
            "url": null,
            "depth": 0,
            "child_num": 2,
            "description": "Custom Manager",
            "children": [{
                "id": 7,
                "label": "CustomList",
                "parent_id": 6,
                "depth": 1,
                "child_num": 0,
                "description": "CustomList",
            }]
        }, {
            "id": 8,
            "label": "Templates",
            "parent_id": null,
            "url": null,
            "depth": 0,
            "child_num": 1,
            "description": "Template Manager",
            "children": [{
                "id": 9,
                "label": "TemplateList",
                "parent_id": 8,
                "depth": 1,
                "child_num": 0,
                "description": "Template Manager",
            }]
        }, {
            "id": 10,
            "label": "Bussiness",
            "parent_id": null,
            "url": null,
            "depth": 0,
            "child_num": 2,
            "description": "Bussiness Manager",
            "children": [{
                "id": 11,
                "label": "BussinessList",
                "parent_id": 10,
                "url": null,
                "depth": 1,
                "child_num": 2,
                "description": "BussinessList",
                "children": [{
                    "id": 12,
                    "label": "Currencies",
                    "parent_id": 11,
                    "depth": 2,
                    "child_num": 0,
                    "description": "Currencies",
                }, {
                    "id": 13,
                    "label": "Dealtypes",
                    "parent_id": 11,
                    "depth": 2,
                    "child_num": 0,
                    "description": "Dealtypes",
                }]
            }, {
                "id": 14,
                "label": "Products",
                "parent_id": 10,
                "url": null,
                "depth": 1,
                "child_num": 2,
                "description": "Products",
                "children": [{
                    "id": 15,
                    "label": "ProductTypes",
                    "parent_id": 14,
                    "depth": 2,
                    "child_num": 0,
                    "description": "ProductTypes",
                }, {
                    "id": 16,
                    "label": "ProductList",
                    "parent_id": 14,
                    "depth": 2,
                    "child_num": 0,
                    "description": "ProductList",
                }]
            }]
        }]

      }
    },
    methods:{
      selectionFn: function() {
        return true
      },
      handleSelectionChange: function(selection) {
        console.log(selection, '选中行的 data, 包含其子节点')
      }
    }
})
  </script>
</body>
</html>